<template>
  <div class="game-data">
    <div class="game-flex cursor-pointer">
      <div class="mr10" v-for="item in gameList">
        <span class="font18" @click="handleType(item.raceStageId)">{{
          RaceStageTypeText[item.stageType as RaceStageTypeEnum]
        }}</span>
        <div
          class="game-line"
          :class="{ action: item.raceStageId === type }"
        ></div>
      </div>
    </div>
    <div class="game-item mt20" v-loading="loading">
      <div v-if="groupList.length > 0">
        <div v-for="it in groupList">
          <div class="mt20">
            <div class="flex font6">
              <!-- <img src="/assets/imges/base/arrowR.png" class="mr10" />{{
                it.raceRoundName
              }} -->
              <img src="../../../../assets/images/base/arrowR.png" class="mr10" />{{
                it.raceRoundName
              }}
            </div>
          </div>
          <el-card
            class="mt15"
            shadow="hover"
            v-for="itt in it.scheduleInfoList"
          >
            <el-collapse
              @change="handleChange(`${itt.raceScheduleId} + 1`, itt)"
            >
              <el-collapse-item>
                <template #title>
                  <div class="card-item flex font16">
                    <div class="mr30">{{ itt.raceOrder }}</div>
                    <div class="card-flex cursor-pointer">
                      {{ itt.homeTeamName
                      }}<img :src="itt.homeTeamLogo" class="card-img ml10" />
                    </div>
                    <div class="ml10 mr10 font20">
                      {{ itt.homeTeamScore }}:{{ itt.awayTeamScore }}
                    </div>
                    <div class="card-flex cursor-pointer">
                      <img :src="itt.awayTeamLogo" class="card-img mr10" />{{
                        itt.awayTeamName
                      }}
                    </div>
                  </div>
                </template>
                <el-divider border-style="dotted" style="margin-top: 0" />
                <div class="card-change">
                  <el-radio-group
                    v-model="isRace"
                    @change="handleChange($event, itt)"
                  >
                    <el-radio-button :label="`${itt.raceScheduleId} + 1`"
                      >比赛数据</el-radio-button
                    >
                    <el-radio-button :label="`${itt.raceScheduleId} + 2`"
                      >比赛名单</el-radio-button
                    >
                  </el-radio-group>
                </div>
                <el-divider border-style="dotted" />
                <GameStep
                  v-if="isRace === `${itt.raceScheduleId} + 1`"
                  :homeDataList="homeDataList"
                  :awayDataList="awayDataList"
                />
                <GameList
                  v-if="isRace === `${itt.raceScheduleId} + 2`"
                  :gameDataList="gameDataList"
                />
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import {
  getRace,
  getRaceGroupSchedule,
  getRacePlayerData,
  getRacePlayerList,
} from "@/api/match";
import { useRoute } from "vue-router";
import { RaceStageTypeText } from "../../config/index";
import { RaceStageTypeEnum } from "../../config/enum";
import GameOptionComponent from "./components/gameOptionComponent.vue";
import GameStep from "../component/components/gameStep.vue";
import GameList from "../component/components/gameList.vue";

// 赛程列表
interface GameModel {
  raceStageId: Number;
  stageType: string;
}

const route = useRoute();
const raceId = ref(0); // 当前赛事的id
const groupList = ref([]); // 赛事列表
const loading = ref<boolean>(false);
const type = ref<number>(1);
const turn = ref<number>(1);
const gameList = ref<GameModel[]>([]);
const isRace = ref<string>("");
const gameDataList = ref([]);
const homeDataList = ref([]);
const awayDataList = ref([]);

const handleChange = async (value: string, params: any) => {
  isRace.value = value;
  if (value === `${params.raceScheduleId} + 1`) {
    const res = await getRacePlayerData({
      raceScheduleId: params.raceScheduleId,
    });
    if (res.data.length > 0) {
      res.data.map((item: any) => {
        if (item.teamId === params.homeTeamId) {
          homeDataList.value = item.racePlayerDataInfoList;
        } else {
          awayDataList.value = item.racePlayerDataInfoList;
        }
      });
    } else {
      homeDataList.value = awayDataList.value = [];
    }
  } else {
    const resl = await getRacePlayerList({
      raceScheduleId: params.raceScheduleId,
    });
    gameDataList.value = resl.data;
  }
};

const handleType = async (value: number) => {
  type.value = value;
  loading.value = true;
  const res = await getRaceGroupSchedule({ raceStageId: value });
  loading.value = false;
  groupList.value = res.data;
};

// 初始化 - 管理阶段
const getRaceList = async () => {
  const res = await getRace({ raceId: raceId.value });
  if (res.data.length != 0) {
    gameList.value = res.data;
    handleType(res.data[0].raceStageId);
  }
};
// 初始化数据
onMounted(() => {
  let { id } = route.query;
  raceId.value = Number(id);
  getRaceList();
});
</script>

<style lang="scss" scoped>
.game-data {
  ::v-deep {
    .el-collapse-item__header {
      height: auto;
      border-bottom: 0px;
    }

    .el-collapse {
      border-top: 0px;
    }

    .el-card__body {
      padding: 0px;
    }
  }

  .game-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .game-line {
    width: 20px;
    height: 2px;
    margin: 0 auto;
    margin-top: 4px;
  }
  .card-change {
    display: flex;
    justify-content: center;
  }
  .action {
    background-color: var(--color-primary);
  }

  .card-item {
    align-items: center;
    padding: 15px 20px;
    width: 100%;
  }

  .card-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-img {
    width: 47px;
    height: 47px;
  }
}
</style>
